import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProFormSelect, ProTable } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import { getIssuingRecord } from './request';
import { Button, Tag } from 'antd';
import { getRoomTypeList } from '../FixLock/BuildingType/request';
import ModalDialog from './components/ModalDialog';
import {  useIntl } from '@umijs/max';
// import SecureWebView from "@/components/SecureWebView/index"
export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);

      console.log(window);

    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};

// 定义表格数据源类型
export type GithubIssueItem = {
  id: number;
  hid: number;
  checkout: string;
  checkin: string;
  cmdInfo: string;
  createAt: number;
  cardNum: string;
  createBy: string;
  exitTime: string;
  idCard: string;
  issyingTime: string;
  mobile: string;
  orderNo: string;
  realName: string;
  roomName: string;
  roomTypeName: string;
  source: string;
  status: number;
};

const Index: React.FC = () => {

  const intl = useIntl()

  // 表格操作源
  const actionRef = useRef<ActionType>();

  // 控制对话框显示隐藏
  const [visible, setVisible] = useState(false);

  // 对话框展示的那一行数据信息
  const [form, setForm] = useState<GithubIssueItem | null>(null);

  // 操作按钮---弹框展示信息
  const operate = (record: GithubIssueItem) => {
    setForm(record);
    setVisible(true);
  };

  // 表格数据--列展示信息
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title:intl.formatMessage({id:"ChecknHistory.serial"}),
      dataIndex: 'inedx',
      valueType: 'index',
      width: 60,
    },
    // {
    //   title: '卡号',
    //   dataIndex: 'cardNum',
    //   hideInTable: true,
    //   search: {
    //     transform: (value) => {
    //       return {
    //         card_num: value,
    //       };
    //     },
    //   },
    // },
    {
      title: intl.formatMessage({id:'business.Room'}),
      dataIndex: 'roomNo',
      align: 'center',
    },
    {
      title: intl.formatMessage({id:"business.Room name"}),
      dataIndex: 'roomName',  
      align: 'center',
    },  
    {
      title: intl.formatMessage({id:"business.Room type"}),
      dataIndex: 'roomTypeName',
      align: 'center',
      renderFormItem: () => {
        return (
          <ProFormSelect
            width={'md'}
            name="roomTypeName"
            request={async () => {
              const res = await getRoomTypeList();
              if (res.data.list) {
                return res.data.list.map((v: any, index: number) => {
                  return { label: v.name, value: v.name, key: index };
                });
              }
              return [];
            }}
            placeholder={intl.formatMessage({id:"business.Please select a roomType"})}
          />
        );
      },
    },
    {
      title: intl.formatMessage({id:"ChecknHistory.Check-in date"}),
      dataIndex: 'checkin',
      search: false,
      valueType: 'dateTime',
      sorter: true,
    },
    {
      title: intl.formatMessage({id:"ChecknHistory.Check-out date"}),
      dataIndex: 'checkout',
      search: false,
      sorter: true,
    },
    {
      title: intl.formatMessage({id:"ChecknHistory.status"}),
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        0: {
          text: (
            <Tag color="#fb3838" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.Card not issued."})}
            </Tag>
          ),
        },
        1: {
          text: (
            <Tag color="#308430" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.Card issuance"})}
            </Tag>
          ),
        },
        2: {
          text: (
            <Tag color="#7C0515" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"business.Return card"})}
            </Tag>
          ),
        },
        3: {
          text: (
            <Tag color="#777777" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.No card checkout."})}
            </Tag>
          ),
        },
        5: {
          text: (
            <Tag color="#99cc00" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.Overwrite the return card"})}
            </Tag>
          ),
        },
        4: {
          text: (
            <Tag color="#16dcdc" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.Room status change, return card."})}
            </Tag>
          ),
        },
        6: {
          text: (
            <Tag color="#febc04" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.Checkout without issuing a card."})}
            </Tag>
          ),
        },
        7: {
          text: (
            <Tag color="#cf3d35" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"business.Loss"})}
            </Tag>
          ),
        },
        8: {
          text: (
            <Tag color="#3f5070" style={{ textAlign: 'center' }}>
              {intl.formatMessage({id:"ChecknHistory.Report a lost room key"})}
            </Tag>
          ),
        },
      },
    },
    {
      title:intl.formatMessage({id:"business.Room card"}),
      dataIndex: 'cardNum',
      search: false,
    },
    {
      title: intl.formatMessage({id:'ChecknHistory.Card issuer'}),
      dataIndex: 'createdBy',
      search: false,
    },
    {
      title:intl.formatMessage({id:"business.Card issuance time"}),
      dataIndex: 'issuingTime',
      search: false,
      sorter: true,
    },
    {
      title:intl.formatMessage({id:"business.Card issuance time"}),
      dataIndex: 'issuingTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            issuing_start_time: value[0],
            issuing_end_time: value[1],
          };
        },
      },
    },
    {
      title: intl.formatMessage({id:'ChecknHistory.Card cancellation time'}),
      dataIndex: 'exitTime',
      search: false,
      sorter: true,
    },
    {
      title: intl.formatMessage({id:"business.Occupants"}),
      dataIndex: 'realName',
      align: 'center',
    },
    // {
    //   title: '操作',
    //   align: 'center',
    //   valueType: 'option',
    //   key: 'option',
    //   search: false,
    //   width: '200px',
    //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
    //   render: (_text: any, record: GithubIssueItem) => (
    //     <>
    //       <Button
    //         type="link"
    //         onClick={() => {
    //           operate(record);
    //         }}
    //       >
    //         查看
    //       </Button>
    //     </>
    //   ),
    // },
  ];
  return (
    <>
      <ProTable<GithubIssueItem>
        defaultSize={'large'}
        columns={columns}
        actionRef={actionRef}
        cardBordered={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
        }}
        request={async (params, sort) => {
          // 获取排序字段
          const obj = sort;
          let keys = Object.keys(obj);
          let sortName = '';
          let order: string | null = '';
          if (keys[0]) {
            sortName = keys[0];
            order = obj[keys[0]] === 'ascend' ? 'asc' : 'desc';
            if (sortName === 'issuingTime') {
              sortName = 'issuing_time';
            } else if (sortName === 'exitTime') {
              sortName = 'exit_time';
            }
          }
          await waitTime(500);
          const res: any = await getIssuingRecord({
            ...params,
            page: params.current,
            sort: sortName,
            order,
          });
          if (res.code !== 0) return {};
          return {
            data: res.data.list || [],
            success: res.code === 0 ? true : false,
            total: res.data.totalCount,
          };
        }}
        rowKey="id"
        search={{ labelWidth: 'auto' }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        dateFormatter="string"
      />


        {/* <SecureWebView url={'http://localhost:8000/'}/> */}

      {/* 操作打开的对话框 */}
      {visible && (
        <ModalDialog
          visible={visible}
          close={() => {
            setVisible(false);
          }}
          form={form}
        />
      )}
    </>
  );
};

export default Index; 